<template>
    <div class="assess_form hemiplegia">
        <div class="form_title">XXXX医疗机构</div>
        <div class="form_name">Brunnstrom偏瘫运动功能评定</div>
        <div class="form_patient_bar">
            <div v-for="(item, index) in patientStruct" :key="index" class="patient_info_item">
                <div class="item_label">{{ item.label }}：</div>
                <div class="item_value">{{ formType == 'template' ? item.label : patientInfo[item.key] }}</div>
            </div>
        </div>
        <el-form ref="assessForm" :model="selfFormData" :rules="rules">
            <el-form-item label="评定侧：" prop="estimateType" class="show_required">
                <el-radio-group v-if="formType === 'edit' || formType == 'template'" v-model="selfFormData.estimateType" :disabled="formType == 'template'">
                    <el-radio v-for="(option, index) in estimateTypeList" :key="'option' + index"
                        :label="option.value">{{ option.label }}</el-radio>
                </el-radio-group>
                <span v-else>{{ getLabelByValue(estimateTypeList, selfFormData.estimateType) }}</span>
            </el-form-item>
            <el-form-item prop="assess">
                <table border class="form_table">
                    <colgroup>
                        <col>
                        <col>
                        <col>
                        <col style="width: 100px;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th />
                            <th class="text_center">阶段</th>
                            <th class="text_center">评定标准</th>
                            <th class="text_center">评定</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in assessFormStruct" :key="index"
                            :class="{ checked: formType === 'view' && selfFormData[item.contentKey] === item.value }">
                            <td v-if="item.level === 'Ⅰ'" rowspan="6" class="text_center no_color">{{ item.limbs }}</td>
                            <td class="text_center">{{ item.level }}</td>
                            <td>
                                <div v-for="(content, contentIndex) in item.content" :key="contentIndex">{{ content }}
                                </div>
                            </td>
                            <td v-if="formType === 'template'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData[item.contentKey]" :label="item.value" />
                            </td>
                            <td v-if="formType === 'view'" class="text_center">
                                <i v-if="selfFormData[item.contentKey] === item.value"
                                    class="el-icon-check check_icon" />
                            </td>
                            <td v-if="formType === 'edit'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData[item.contentKey]" :label="item.value" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-form-item>
        </el-form>
        <div v-if="formType !== 'template'" class="assess_create_info">
            <div class="create_info_item">
                <div class="item_label">评定者：</div>
                <div class="item_value">{{ selfFormData.evaluateUser }}</div>
            </div>
            <div class="create_info_item">
                <div class="item_label">评定时间：</div>
                <div class="item_value">{{ selfFormData.evaluateTime }}</div>
            </div>
        </div>
    </div>
</template>

<script>
const estimateTypeList = [
    {
        label: '左侧',
        value: 1
    },
    {
        label: '右侧',
        value: 2
    },
    {
        label: '双侧',
        value: 3
    }
]
const initDefaultForm = () => {
    return {
        estimateType: undefined,
        upperLimbsValue: undefined,
        handValue: undefined,
        lowerLimbsValue: undefined,
        evaluateUser: '',
        evaluateTime: ''
    }
}
const assessFormStruct = [
    {
        limbs: '上肢',
        level: 'Ⅰ',
        value: 1,
        content: ['无任何运动'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '上肢',
        level: 'Ⅱ',
        value: 2,
        content: ['仅出现协同运动模式'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '上肢',
        level: 'Ⅲ',
        value: 3,
        content: ['可随意发起共同运动'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '上肢',
        level: 'Ⅳ',
        value: 4,
        content: ['手臂可触及腰部；', '肘伸直的情况下，肩可前屈90度；', '肩0度，肘屈90度的条件下，前臂可旋前、旋后；'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '上肢',
        level: 'Ⅴ',
        value: 5,
        content: ['肘伸直，肩可外展90度', '肘伸直，前臂中立位，上肢可举过头', '肘伸直，肩前屈30~90度时，前臂可旋前旋后'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '上肢',
        level: 'Ⅵ',
        value: 6,
        content: ['运动协调近于正常，指鼻无明显辨距不良，但速度比健侧慢'],
        contentKey: 'upperLimbsValue'
    },
    {
        limbs: '手',
        level: 'Ⅰ',
        value: 1,
        content: ['无任何运动'],
        contentKey: 'handValue'
    },
    {
        limbs: '手',
        level: 'Ⅱ',
        value: 2,
        content: ['仅有极细微的屈曲'],
        contentKey: 'handValue'
    },
    {
        limbs: '手',
        level: 'Ⅲ',
        value: 3,
        content: ['可有勾状抓握，但不能伸指'],
        contentKey: 'handValue'
    },
    {
        limbs: '手',
        level: 'Ⅳ',
        value: 4,
        content: ['能侧捏及松开拇指，手指有半随意的小范围伸展'],
        contentKey: 'handValue'
    },
    {
        limbs: '手',
        level: 'Ⅴ',
        value: 5,
        content: ['可作球状和圆柱状抓握，手指同时伸展，但不能单独伸展'],
        contentKey: 'handValue'
    },
    {
        limbs: '手',
        level: 'Ⅵ',
        value: 6,
        content: ['所有抓握均能完成，但速度和准确性比健侧差'],
        contentKey: 'handValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅰ',
        value: 1,
        content: ['无任何运动'],
        contentKey: 'lowerLimbsValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅱ',
        value: 2,
        content: ['仅有极少的随意运动'],
        contentKey: 'lowerLimbsValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅲ',
        value: 3,
        content: ['坐位或站立位，有霞、膝、踝的协同性屈曲'],
        contentKey: 'lowerLimbsValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅳ',
        value: 4,
        content: ['坐位，可屈膝90度以上，足可向后滑动；', '坐位，在足根不离地的情况下踝能背屈；'],
        contentKey: 'lowerLimbsValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅴ',
        value: 5,
        content: ['健腿站，伸膝下，踝可背屈；', '健腿站，病腿可先屈膝，后伸髓；'],
        contentKey: 'lowerLimbsValue'
    },
    {
        limbs: '下肢',
        level: 'Ⅵ',
        value: 6,
        content: ['坐位下伸直膝可内外旋下肢，合并足内外翻；', '站立位下可使髓外展到抬起该侧骨盆所能达到的范围；'],
        contentKey: 'lowerLimbsValue'
    }
]
export default {
    name: 'Hemiplegia',
    props: {
        formType: {
            type: String,
            default: 'template' // 表单类型：template：模板，edit：评估，view：详情
        },
        patientInfo: {
            type: Object,
            default: () => ({}) // 患者信息
        },
        doctorType: {
            type: String,
            default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
        },
        assessInfo: {
            type: Object,
            default: () => ({}) // 评定表信息
        }
    },
    data() {
        return {
            estimateTypeList,
            assessFormStruct,
            selfFormData: {},
            rules: {
                estimateType: [
                    { required: true, message: '请选择评定侧', trigger: 'change' }
                ],
                assess: [
                    { validator: this.validateAssess, trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        patientStruct() {
            if (this.formType === 'edit' || this.formType === 'view') {
                if (['hospital', 'therapists'].includes(this.doctorType)) {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '病区',
                        key: 'sickRegion'
                    }, {
                        label: '床号',
                        key: 'bedNum'
                    }, {
                        label: '住院号',
                        key: 'admissionNum'
                    }]
                } else {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '门诊号',
                        key: 'admissionNum'
                    }]
                }
            } else {
                return [{
                    label: '姓名',
                    key: 'patientName'
                }, {
                    label: '门诊号/住院号',
                    key: 'outpatientNo'
                }]
            }
        }
    },
    watch: {
        assessInfo: function (val) {
            this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)
        }
    },
    mounted() {
        this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)
    },
    methods: {
        getLabelByValue(list, val) {
            const item = list.find(item => item.value === val)
            return item ? item.label : ''
        },
        getFormData() {
            return new Promise((resolve, reject) => {
                this.$refs.assessForm.validate((valid) => {
                    if (valid) {
                        resolve({
                            ...this.selfFormData,
                            patientId: this.patientInfo.id
                        })
                    } else {
                        reject('存在未通过表单校验的数据')
                        return false
                    }
                })
            })
        },
        changeToEstimateList(estimateId, submitForm) {
            const keyList = []
            Object.keys(submitForm).forEach(key => {
                if(submitForm[key]){
                    keyList.push({
                        key,
                        value: JSON.stringify(submitForm[key])
                    })
                }
            })
            return JSON.stringify({
                estimateId,
                keyList
            })
        },
        async saveLocalFormData(source, patientId) {
            let data = await this.getFormData();
            const estimateId = 7
            const submitForm = {
                evaluateSource: source,
                estimateType: data.estimateType,
                upperLimbsValue: data.upperLimbsValue,
                handValue: data.handValue,
                lowerLimbsValue: data.lowerLimbsValue
            }
            localStorage.setItem(`estimate_${source}_${patientId}_${estimateId}`, this.changeToEstimateList(estimateId, submitForm)); 
        },
        validateAssess(rule, value, callback) {
            if (this.selfFormData.upperLimbsValue === undefined) {
                callback('请选择上肢等级')
            } else if (this.selfFormData.handValue === undefined) {
                callback('请选择手等级')
            } else if (this.selfFormData.lowerLimbsValue === undefined) {
                callback('请选择下肢等级')
            } else {
                callback()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');

.hemiplegia {
    .assess_radio {
        ::v-deep .el-radio__label {
            display: none;
        }
    }
}
</style>
